<template>
  <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px;">
    <el-form-item label="其他设置" class="one-label">
      <!-- <el-form-item v-if="getVersionType() != 5 && fromListPage == 30" label="零售运费" class="width-per-50" label-width="170px" prop="postFee">
        <el-input v-model="form.postFee" class="long-input-2" min="0" >
          <template slot="append">元</template>
        </el-input>
      </el-form-item> -->
      <!-- <el-form-item v-if="getVersionType() != 5 && fromListPage == 31" label="批发运费" class="width-per-50" label-width="170px" prop="wholesalePostFee">
        <el-input v-model="form.wholesalePostFee" class="long-input-2" min="0" >
          <template slot="append">元</template>
        </el-input>
      </el-form-item> -->
      <el-form-item v-if="getVersionType() == 5" label="来源：" label-width="170px" prop="supplierId">
        <el-select v-model="form.supplierId" placeholder="请选择供应商">
          <el-option v-for="supplier in suppliers" :key="supplier.supplierId" :label="supplier.supplierName" :value="supplier.supplierId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="fromListPage == 30" label="状态：" label-width="170px">
        <el-radio v-model="form.goodsStatus" label="0">存到仓库（默认下架）</el-radio>
        <el-radio v-model="form.goodsStatus" label="1">直接上架</el-radio>
      </el-form-item>
      <el-form-item v-if="fromListPage == 31" label="状态：" label-width="170px">
        <el-radio v-model="form.wholesaleGoodsStatus" label="0">存到仓库（默认下架）</el-radio>
        <el-radio v-model="form.wholesaleGoodsStatus" label="1">直接上架</el-radio>
      </el-form-item>
      <el-form-item label="商品重量：" label-width="170px">
        <el-input style="width: 200px" v-model="form.weight" class="long-input-2" :disabled="form.thirdGoodsId ? true :false">
          <template slot="append">Kg</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品体积：" label-width="170px">
        <el-input style="width: 200px" v-model="form.size" class="long-input-2" :disabled="form.thirdGoodsId ? true :false">
          <template slot="append">m³</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品地区：" label-width="170px">
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-input style="width: 200px" v-model="form.prov" class="long-input-2" placeholder="省份" :disabled="form.thirdGoodsId ? true :false"/>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light">
            <el-input style="width: 200px" v-model="form.city" class="long-input-2" placeholder="城市" :disabled="form.thirdGoodsId ? true :false"/>
          </div></el-col>
        </el-row>
      </el-form-item>
    </el-form-item>
  </el-form>
</template>


<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import { listSupplier } from '@/api/user/supplier'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      dict: { type: Object },
      fromListPage: { type: Number, default: 30 }
    },
    data() {
      return {
        updataFlag: false,
        form: {
          // postFee: '',
          // wholesalePostFee: '',
          supplierId: '', // 供应商
          thirdGoodsId: '', // 淘宝联盟
          goodsStatus: '0',
          wholesaleGoodsStatus: '0',
          weight: '',
          size: '',
          prov: '',
          city: ''
        },
        suppliers: [],
        rules: {
          // postFee: [
          //   { max: 14, message: '运费最多输入14 个字符' },
          //   { required: true, message: '请填写运费', trigger: 'blur' },
          //   { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/, message: '请正确输入运费' }
          // ],
          // wholesalePostFee: [
          //   { max: 14, message: '运费最多输入14 个字符' },
          //   { required: true, message: '请填写运费', trigger: 'blur' },
          //   { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/, message: '请正确输入运费' }
          // ]
        }
      }
    },
    // 初始化页面
    created() {
      this.initGoodsEdit()
      this.initSuppliers()
    },
    mounted() {
    },
    methods: {
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          // that.form.postFee = that.$utils.isExist(data.postFee) ? data.postFee : '0'
          // that.form.wholesalePostFee = that.$utils.isExist(data.wholesalePostFee) ? data.wholesalePostFee : '0'
          that.form.thirdGoodsId = that.$utils.isExist(data.thirdGoodsId) ? data.thirdGoodsId : ''
          that.form.goodsStatus = that.$utils.isExist(data.goodsStatus) ? data.goodsStatus + '' : '0'
          that.form.wholesaleGoodsStatus = that.$utils.isExist(data.wholesaleGoodsStatus) ? data.wholesaleGoodsStatus + '' : '0'
          that.form.supplierId = that.$utils.isExist(data.supplierId) ? data.supplierId : ''
          that.form.weight = that.$utils.isExist(data.weight) ? data.weight : ''
          that.form.size = that.$utils.isExist(data.size) ? data.size : ''
          that.form.prov = that.$utils.isExist(data.prov) ? data.prov : ''
          that.form.city = that.$utils.isExist(data.city) ? data.city : ''
          if (data.goodsSource === 0) {
            that.updataFlag = true
          } else {
            that.updataFlag = false
          }
        })
      },
      initSuppliers() {
        if (this.getVersionType() * 1 === 5) {
          listSupplier({ enterpriseId: this.getEnterpriseId() }).then(response => {
            if (response.isError) return
            this.suppliers = response.data
          })
        }
      },
      checkForm() {
        // 需要校验的集合
        const checkArrays = []
        // if (this.fromListPage === 30) {
        //   checkArrays.push('postFee')
        // }
        // if (this.fromListPage === 31) {
        //   checkArrays.push('wholesalePostFee')
        // }
        let ret = true
        let message = ''
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            message = valid
            ret = false
            return
          }
        })
        if (!ret) {
          this.$message({
            type: 'error',
            message: message
          })
          return false
        }

        this.$refs['form'].validate((valid) => {
          if (valid) {
            ret = true
          }
        })
        return ret
      }
    }
  }
</script>
<style lang="less" scoped>
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 130px;
    height: 130px;
    display: block;
  }
  .pic-bar{
    position: relative;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
</style>
